<template>
    <div>
        <el-card>
            <div slot="header">项目信息</div>
            <el-form label-width="150px" class="project-info">
                <el-row>

                    <el-col :span="8">
                        <el-form-item label="供应商名称">
                            <el-input size="small" type="text" disabled v-model="form.supplierName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="供应商编号">
                            <el-input size="small" type="text" disabled v-model="form.supplierCode"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="供应商类别">
                            <el-input size="small" type="text" disabled v-model="form.supplierType"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item :label="$t('material.materialName')">
                            <el-input size="small" type="text" disabled v-model="form.materialName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="$t('inventoryManagement.inventoryManagement')">
                            <el-input size="small" type="text" disabled v-model="form.materialCode"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="物料类型">
                            <el-input size="small" type="text" disabled v-model="form.materialType"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="成熟度">
                            <el-input size="small" type="text" disabled v-model="form.maturity"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="版本总数量">
                            <el-input size="small" type="text" disabled v-model="versionOptions.length"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="对比版本数量">
                            <el-input size="small" type="text" disabled v-model="dialogForm.version"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <el-card class="version-card">
            <div slot="header">版本信息</div>
            <el-form :model="dialogForm" size="small" :rules="rules" label-width="150px" class="project-info">
                <el-form-item label="版本对比" prop="version">
                    <el-select v-model="dialogForm.version" style="width:300px" multiple :placeholder="$t('public.selectPl')+'供应商类型'" @change="handleChange">
                        <el-option v-for="dict in versionOptions" :key="dict" :label="dict" :value="dict" />
                    </el-select>
                </el-form-item>
            </el-form>
            <v-table v-for="i in dialogForm.version" :key="i" :version="i" :form="form"></v-table>
        </el-card>
    </div>
</template>
<script>
import {getContrast} from '@/api/basic/version'
import VTable from './table.vue'

export default {
    name: 'mtool-detial',
    components: { VTable },
    dicts: [
        'NYIQC_SUPPLIER_TYPE', //供应商类型
    ],
    props: {
        value: {
            type: Object,
        },
        visible: {
            type: Boolean,
            default: false,
        },
        type: [String, Number], //1:新增  2：编辑 3：查看
    },
    watch: {
        value(val) {
            this.dialogForm = { ...val }
        },
    },
    computed: {
        isShow: {
            get() {
                return this.visible
            },
            set() {},
        },
        headerTitle() {
            const { type } = this
            let title = ''
            // if(type == 1){
            //   title = this.$t('mtool.addHeader')
            // }
            if (type == 2) {
                title = '编辑供应商'
            }
            // if(type == 3){
            //   title = this.$t('mtool.viewHeader')
            // }
            return title
        },
    },
    data() {
        return {
            form: {},
            versionOptions: [],
            loading: false,
            fullscreen: false,
            deviceOptions: undefined,
            supplierOptions: undefined,
            dialogForm: {},
            // 表单校验
            rules: {
                version: [
                    {
                        required: true,
                        message: this.$t('formValidation.versionNumberCannotBeEmpty'),
                        trigger: 'blur',
                    },
                ],
            },
        }
    },
    created() {
        this.getContrast()
    },
    methods: {
        handleChange(sels) {
            console.log(sels)
        },
        getContrast() {
            const { factoryName, materialCode, supplierCode } =
                this.$route.query
            // console.log({factoryName:decodeURIComponent(factoryName),materialCode:decodeURIComponent(materialCode),supplierCode:decodeURIComponent(supplierCode)})
            if (factoryName && materialCode && supplierCode) {
                getContrast({
                    factoryName: decodeURIComponent(factoryName),
                    materialCode: decodeURIComponent(materialCode),
                    supplierCode: decodeURIComponent(supplierCode),
                }).then((res) => {
                    if (res.code == 200) {
                        this.form = res.data
                        this.versionOptions = res.data.version
                            ? res.data.version.split(';')
                            : []
                    }
                })
            }
        },
        /** 发起提交 */
        submitForm: function () {
            this.loading = true
            this.$refs.detailForm.validate((valid) => {
                if (valid) {
                    updateSupplier(this.dialogForm).then((res) => {
                        this.loading = false
                        if (res.code == 200) {
                            this.$emit('refresh')
                            this.$modal.msgSuccess('操作成功!')
                            this.$emit('update:visible', false)
                        } else {
                            this.$modal.msgError(res.msg)
                        }
                    })
                }
            })
        },
        handleClose(done) {
            this.$emit('update:visible', false)
        },
        //设备模糊查询
        // deviceRemoteMethod(val,cb){
        //   console.log(val)
        //   listAllGaugeMessage({deviceName:val}).then(res=>{
        //     this.deviceOptions = res.data.map(i=>i.deviceName)
        //     cb(res.data)
        //   })
        // },
        // handleDeviceSelect(e){
        //     this.dialogForm.deviceName = e.deviceName
        //   this.dialogForm.gaugeType = e.gaugeType
        //     this.$refs.deviceName.$emit("el.form.blur");
        // },
        // handleDeviceBlur(e){
        //   const { deviceOptions,dialogForm } = this
        //   if(!deviceOptions.includes(dialogForm.deviceName)){
        //     this.dialogForm.deviceName = ""
        //   }
        // },
        // //工厂模糊查询
        // supplierRemoteMethod(val,cb){
        //   listALLSupplier({supplierName:val}).then(res=>{
        //     this.supplierOptions = res.data.map(i=>i.deviceName)
        //     cb(res.data)
        //   })
        // },
        // handleSupplierSelect(e){
        //   this.dialogForm.supplierName = e.supplierName
        //   this.$refs.supplierName.$emit("el.form.blur");
        //
        // },
        // handleSupplierBlur(e){
        //   const { supplierOptions, dialogForm } = this
        //   if(!supplierOptions.includes(dialogForm.supplierName)){
        //     this.dialogForm.supplierName = ""
        //   }
        // },
        // handleExpireTime(e){
        //   console.log(e)
        //   const today = new Date().getTime()
        //   const val = new Date(e).getTime()
        //     if(val > today){
        //       this.dialogForm.remDay = ~~((val-today)/1000/60/60/24).toFixed(1)
        //     }else{
        //       this.dialogForm.remDay = 0
        //     }
        //   this.$forceUpdate()
        // },
        // handleRespName(e){
        //   this.dialogForm.respName = e.name
        // },
        // handleEmployName(e){
        //   this.dialogForm.employName = e.name
        // },
        // handleRespDept(e){
        //   this.dialogForm.respDept = e.name
        // }
    },
}
</script>

<style scoped>
.project-info ::v-deep .el-form-item {
    margin-bottom: 0 !important;
}
.version-card {
    margin-top: 10px;
}
</style>
